{% extends 'authuser/base.html' %}
{% load static %}
{% load jsonify %}

{% block title %}

{% endblock %}

{% block content %}

<script src="{{ js_config.js_lib.nice_validator }}"></script>
<link rel="stylesheet" href="{{ js_config.js_lib.nice_validator_css }}">

{% include 'director/reverse.html' %}

<script type="text/javascript">
    if('hide_load' in parent){
        parent.hide_load()
    }

    regist_url='{{regist_url }}'

    page_cfg = {{page_cfg | jsonify }}


    meta={
        errors:{},
        row:{
            username:'',
            password:'',

        },
        heads:[
            {name:'username',editor:'linetext',autofocus:true,placeholder:'用户名'},
            {name:'password',editor:'password',placeholder:'用户密码',},
        ]
    }
    $(function () {
        var login_logic =new Vue({
            el:'#there',
            data:{
//                                meta:meta,
                row:{  username:'',
                    password:'',
                    validate_img:'',
                    auto_login:true,
                },
//                                heads:[
//                                        {name:'username',editor:'linetext',autofocus:true,placeholder:'用户名'},
//                                        {name:'password',editor:'password',placeholder:'用户密码',},
//                                ],
                errors:{},
                page_cfg:page_cfg,
//                                regist_url:regist_url,
//                                auto_login:false,
            },
            computed:{
                full_regist_url:function(){
                    var next = ex.parseSearch().next
                    return ex.appendSearch(regist_url,{next:next})
                },
                has_validate(){
                    return this.row.validate_img.length >0
                }
            },
            mounted:function(){
                this.validateor= $("#there").validator({
                    fields: {
                        username:"required;rowError(login_logic.errors)",
                        password:'required;rowError(login_logic.errors)',
                    }
                });
            },
            watch:{
                has_validate(v){
                    if(v){
                        this.validateor=$("#there").validator({
                            fields: {
                                username:"required;rowError(login_logic.errors)",
                                password:'required;rowError(login_logic.errors)',
                                validate_code:'required;rowError(login_logic.errors)'
                            }
                        });
                    }else{
                        this.validateor=$("#there").validator({
                            fields: {
                                username:"required;rowError(login_logic.errors)",
                                password:'required;rowError(login_logic.errors)',
                            }
                        });
                    }
                }
            },
            methods:{
                tr(wd){
                  return cfg.tr(wd)
                },
                submit_info:function () {

                if(! this.validateor.isValid()){
                    return
                }
//                    var post_data=[{fun:'do_login',username:this.row.username,password:this.row.password,auto_login:this.row.auto_login}]
//                    var post_data={
//                        username:this.row.username,
//                        password:this.row.password,
//                        auto_login:this.row.auto_login,
//                    }

                    cfg.show_load()
                    var self=this;
//                    $.post('/d/ajax/authuser',JSON.stringify(post_data),function (resp) {
                    ex.director_call('do_login',{row:this.row},function (resp) {
                        cfg.hide_load()
                        if(resp.success){
                             if(page_cfg.next){
                                location=decodeURIComponent(page_cfg.next) ;
                            }else if(parent.root_page){
                                // 手机版里面，iframe内容直接跳转到首页
                                parent.location= parent.root_page
                            } else{
                                location = '/'
                            }
                        }else if(resp.validate_img){
                            ex.vueAssign(self.row,{validate_img:resp.validate_img})
                        }

                        if(resp.action){
                            ex.eval(resp.action)
                        }
                        if(resp.errors){
                            for(var k in resp.errors){
                               $("#"+k).trigger("showmsg", ["error", resp.errors[k].join(';') ]);
//                                cfg.toast(resp.errors[k].join(';'),{icon: 6})
                                break;
                           }

                        }
//                        if(resp.errors){
//                            self.errors=resp.errors
//                            for(var k in self.errors){
//                                $("#"+k).trigger("showmsg", ["error", self.errors[k].join(';') ]);
//                            }
////                                                        content_validator.isValid()
////                                                        cfg.showMsg(resp.do_login.errors)
////                                                        update_vue_obj(self.meta.errors,resp.do_login.errors)
//                        }else{
//                            if(parent.root_page){
//                                // 手机版里面，iframe内容直接跳转到首页
//                                parent.location= parent.root_page
//                            }else if(page_cfg.next){
//                                location=page_cfg.next;
//                            }else{
//                                location = '/'
//                            }
//                        }
                    })
                }
            }
        })
        document.onkeyup = function (e) {//按键信息对象以函数参数的形式传递进来了，就是那个e
            var code = e.charCode || e.keyCode;  //取出按键信息中的按键代码(大部分浏览器通过keyCode属性获取按键代码，但少部分浏览器使用的却是charCode)
            if (code == 13) {
                login_logic.submit_info()
            }
        }

        $.validator.config({
            rules: {
                rowError: function(element,errors) {
                    return errors[element.name]
                }
            }
        });

//        window. content_validator =
// $("#there").validator({
//            fields: {
//                username:"required;rowError(login_logic.errors)",
//                password:'required;rowError(login_logic.errors)',
//            }
//        });

    })


</script>



<style>
    /*.panel{*/
    /*background: radial-gradient(#bfe3ff 20%, #45baff 60%);;*/
    /*}*/
    .fa-input{
        position: relative;
        background-color: transparent;
    }
    .fa-input i{
        position: relative;
        top:-28px;
        left: 16px;
    }
    button.login{
        /*border-radius: 17px;*/
        width: 100%;
        margin-top: -9px;
    }
    .btn:focus,
    .btn:active:focus,
    .btn.active:focus,
    .btn.focus,
    .btn:active.focus,
    .btn.active.focus {
        outline: none;
    }

    .n-right{
        position: absolute;
        left: 1em;
        top:2em;
    }

</style>

<img src='{% static "authuser/image/login_bg.jpg" %}' alt="" style="width: 100%;height: 50%">

<div id='there' class="flex" style="position: relative">
    <div class="flex" style="position: absolute;bottom:-100px;left:50%;transform: translateX(-50%);
                border: 1px solid #dcdcdc;
                background-color: white;">
        <div name="logForm" ng-submit='submit_func(logForm.$valid)' class='form-signin' novalidate>
            <component v-if="page_cfg.head_editor" :is="page_cfg.head_editor"></component>
            <com-ui-login-head v-else  :ctx="page_cfg"></com-ui-login-head>

            <!--<h2 class='form-signin-heading' style="text-align: center;margin-bottom: 1em;" v-text="page_cfg.title"></h2>-->
            <!--<div style="position: relative">-->
                <!--<hr>-->
                <!--<div style="position: absolute;top:50%;left:50%;transform: translate(-50%,-50%);-->
                                        <!--background-color:white;padding: 0 1em;width: 12em;" v-text="page_cfg.subtitle"></div>-->
            <!--</div>-->
            <div class="fa-input">
                <input type="text" id="username" name="username" class="form-control"  :placeholder="page_cfg.login_item" v-model="row.username">
                <div style="position: absolute;left: 7px;top:3px">
                    <img src='{% static "authuser/image/login_ic_username.png" %}'  alt="" style="width: 12px">
                </div>
            </div>
            <div class="fa-input">
                <input type="password" id="password" name="password" class="form-control"  :placeholder=tr("密码") v-model="row.password">
                <div style="position: absolute;left: 7px;top:3px">
                    <img src= '{% static "authuser/image/login_ic_password.png" %}'   alt="" style="width: 12px">
                </div>
            </div>
            <div class="fa-input" v-if="row.validate_img">
                <div style="display: flex">
                    <input type="text" id="validate_code" name="validate_code" class="form-control"  :placeholder=tr("验证码") v-model="row.validate_code">
                    <img :src="row.validate_img" alt="">
                </div>

                <div style="position: absolute;left: 7px;top:3px">
                    <img src='{% static "authuser/image/validate.png" %}'   alt="" style="width: 12px">
                </div>
            </div>
            <div style="margin: 1em 0;">
                <input type="checkbox" id="auto_login" v-model="row.auto_login"/><label for="auto_login" style="font-weight: 400;" v-text="tr('下次自动登录')"></label>
            </div>

            <button class="btn btn-primary login" name="test" type="button" value="val" @click='submit_info()' v-text="tr('登录')"></button>

<div v-if="page_cfg.regist_url" style="text-align: right;padding-top: 1em ">
    <a :href="page_cfg.regist_url">立即注册</a>
</div>

        </div>
        <img src= '{% static "authuser/image/login_shawdow.png" %}' alt="" style="position: absolute;right: -30px;bottom: 0;width: 30px">
        <img src= '{% static "authuser/image/login_shawdow.png" %}' alt="" style="position: absolute;left: -30px;bottom: 0;width: 30px;transform: scaleX(-1)">

        <!--<component :is="page_cfg.footer_editor || 'com-ui-login-footer'" :ctx="page_cfg"></component>-->

    </div>

    <component :is="page_cfg.footer_editor || 'com-ui-login-footer'" :ctx="page_cfg"></component>
</div>
<style type="text/css">
    .fa-input{
        margin-bottom: 1em;
    }
    .panel{
        min-height: 100vh;
        width: 100vw;
    }
    .form-signin{
        min-width:350px;
        padding: 2em 2em;
        /*border:1px solid gainsboro;*/
        /*border-radius: 5px;*/
        /*background-color: #bcf7c2;*/
        /*margin: 0 auto;*/
    }
    .form-signin input{
        /*border-radius: 17px;*/
        padding-left: 3em;
    }
    /*input{*/
    /*margin-bottom:3px;*/
    /*}*/
</style>

{% endblock %}